<template>
  <el-menu
    :default-active="routePath"
    class="menu-container"
    :collapse="false"
    :mode="appSetting.menu.mode"
  >
    <SubMenu :menu="userMenu" @click="clickMenuItem" />
  </el-menu>
</template>

<script setup lang="ts">
import type { UserMenu } from '@/store'
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserMenu, useAppSetting } from '@/store'
import SubMenu from './subMenu.vue'

defineOptions({
  name: 'LayoutCpnMenu'
})

const router = useRouter()
const route = useRoute()
const routePath = computed<string | undefined>(
  () => route.matched[route.matched.length - 1].path
)

const { appSetting } = useAppSetting()
const { userMenu } = useUserMenu()

const clickMenuItem = (item: UserMenu) => {
  if (item.link) {
    window.open(item.link)
    return
  }
  if (item.path !== routePath.value) {
    router.push(item.path)
  }
}
</script>

<style lang="scss" scoped>
.menu-container:not(.el-menu--collapse) {
  width: 256px;
  flex: 1;
  // &.is-collapse {
  //   width: 63px;
  // }
}

.el-menu {
  :deep(.el-menu-item),
  :deep(.el-sub-menu .el-sub-menu__title) {
    @include m-menu-theme(true);
    @include m-menu-theme-hover();

    &.is-active {
      @include m-menu-theme-active();
    }
  }
}

// 纵向
.el-menu--vertical {
  height: 100%;
  :deep(.el-menu-item),
  :deep(.el-sub-menu .el-sub-menu__title) {
    border-left: 4px solid transparent;
    &.is-active {
      border-color: #ffffff;
    }
    &:hover {
      border-color: #ffffff;
    }
  }
}

// 横向
.el-menu--horizontal {
}
</style>
